<template>
    <div class="login_container">
            <!-- 登录 -->
        <div class="login_box" >
            <el-form class="login_form" :model="loginForm" ref="loginFormRef">
                <el-form-item label="用户" prop="account">
                    <el-input prefix-icon="el-icon-user" v-model="loginForm.account">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item class="login_btns">
                    <el-button type="primary" @click="login">登陆</el-button>
                </el-form-item>
                <el-form-item class="login_btns">
                    <el-button type="warning" @click="addDialogVisible = true">注册</el-button>
                </el-form-item>
                <p>还没账号？请点击注册按钮</p>  
            </el-form>       
        </div>
            <!-- 底部 -->
    <div class="footer">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机电脑</li>
        <li>销售联盟</li>
        <li>合作商谈</li>
        <li>KM社区</li>
      </ul>
      <div class="address">详细地址:湖南科技大学二区七栋226</div>
    </div>

        <!-- 用户注册 -->
        <el-dialog v-model="addDialogVisible" title="用户注册" width="30%" :before-close="handleClose" center>
            <el-form :model="userForm" label-width="120px">
                <el-form-item label="用户账号">
                <el-input v-model="userForm.account" />
                </el-form-item>
                <el-form-item label="用户昵称">
                <el-input v-model="userForm.username" />
                </el-form-item>
                <el-form-item label="密码">
                <el-input v-model="userForm.password" />
                </el-form-item>
                <el-form-item label="性别">
                <el-input v-model="userForm.sex" />
                </el-form-item>
                <el-form-item label="年龄">
                <el-input v-model="userForm.age" />
                </el-form-item>
                <el-form-item label="联系电话">
                <el-input v-model="userForm.phone" />
                </el-form-item>
                <el-form-item label="邮箱">
                <el-input v-model="userForm.email" />
                </el-form-item>                
                <el-form-item label="地址">
                <el-input v-model="userForm.address" />
                </el-form-item>                
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="regist">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
    
</template>
<script>
    export default{
       data(){
        return{
            loginForm: {
                account: "",
                password: "",
            },
            id:'',
            userForm:{
                account:'',
                username:'',
                password:'',
                sex:'',
                age:'',
                phone:'',
                email:'',
                address:''
            },
            addDialogVisible:false,
        }
       },
       methods:{
        async login(){
           const result=await this.$http.post('/user/login',{account:this.loginForm.account,password:this.loginForm.password}
           )
           console.log(result);
           if(result.code!==200) return this.$message.error('登录失败 账号或密码错误！')
           this.id=result.data
           this.$router.push(`/shop/${this.id}`)
           this.$message.success('登录成功 欢迎来kM数码商城')
        },  
        async regist(){
            const result= await this.$http.post('/user',this.userForm)
            console.log(result);
        //    this.addDialogVisible =false
        }
        
       },
       
    }   
</script>
<style scoped>
.login_box{
    margin: 0 auto;
    width: 100%;
    height: 500px;
    padding-top: 100px;
    background: url(~@/assets/350.png) no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
}

.el-form{
    float: right;
    width: 300px;
    margin-right: 80px;
    background: #f5f5f5;
    padding: 20px;
    border: 1px solid #b0b0b0;
    border-radius: 5px;
    text-align: center;
}
.el-form button{
    margin-left: 100px;
}
.el-form p{
    font-size: 12px;
    color: red;
}
.footer{
      width: 100%;
      margin: 0 auto;
      text-align: center;
      line-height: 24px;
      
      }
.footer li {
 
          display: inline-block;
          border-right: 1px solid #e4e4e4;
          padding: 0 20px;
          margin: 15px 0;
        }

</style>